<%inherit file="/base.html"/>

<%def name="main_heading()">${_('Structure')}</%def>

<%def name="content()">

<style>


.management {
	font-weight: bold;
}


.division-name {
	font-size: 0.8em;
}

.main-district-fieldset {
	border:4px solid #FED;
	margin: 4px;
}

.management-fieldset, .district-fieldset {
	border: 4px solid #EEF;
	margin: 4px;
}

.management-legend, .district-legend {
	color: #5077BE;
	font-weight: bold;
	cursor: pointer;
}

.management-legend { font-size: 0.9em; }
.district-legend { font-size: 1.0em; }

.minimized { display: none; }

.management-legend.closed,
.district-legend.closed {
	text-decoration: underline;
}

</style>

<fieldset class="main-district-fieldset">
	<legend>
		<h3>${c.main_district}</h3>
	</legend>
	% for management in c.divisions(c.main_district, True):
	<fieldset class="management-fieldset">
		<legend class="management-legend closed">${management.name}</legend>
		<span class="divisions minimized">
			% for division in c.subdivisions(management):
			<p class="division-name">${division.name}</p>
			% endfor
		</span>
	</fieldset>
	% endfor
	% for division in c.divisions(c.main_district, False):
		% if not division.superior:
		<p class="division-name">${division.name}</p>
		% endif
	% endfor
</fieldset>

% for district in c.districts:
<fieldset class="district-fieldset">
	<legend class="district-legend closed">${district}</legend>
	<span class="divisions minimized">
		% for division in district.divisions:
			% if not division.is_disabled:
			<p class="division-name">${division.name}</p>
			% endif
		% endfor
	</span>
</fieldset>
% endfor

<script type="text/javascript">
	
$('.district-legend, .management-legend').click(function() {
	var fs = $(this).parent();
	var divisions = fs.children('.divisions');
	if(divisions.hasClass('minimized')) {
		divisions.removeClass('minimized');
		$(this).removeClass('closed');
	} else {
		divisions.addClass('minimized');
		$(this).addClass('closed');
	}
});

</script>

</%def>